/**
Copyright 2015 The Cockroach Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the License for the specific language governing
permissions and limitations under the License.

Author: Matt Tracy (matt@cockroachlabs.com)
*/

@require '../modules/*'
@require 'typography.styl'


// ---- Navigation ----
$navbar-bg            = white
$navbar-border        = $secondary-gray-1
$main-nav-inactive    = $main-gray
$main-nav-active-bg   = $main-navy
$main-nav-active-font = white
$main-nav-active-icon = $main-green
$main-nav-hover       = $main-dark-gray
$subnav-active-color  = $secondary-green-1
$subnav-text-color    = $secondary-slate-gray
$subnav-hover-color   = $main-dark-gray

$subnav-underline-height = 3px

#header
  position absolute
  top 0
  left 0
  z-index 1
  width $nav-width
  modular-font-size '1'
  min-height 100%
  background-color $navbar-bg
  border-right 1px solid $navbar-border
  margin 0
  padding 0
  display block

header
  ul.nav
    width 100%
    li
      width 100%
      padding 0
      border 0
      font-family Lato-Heavy
      font-size 8px
      text-transform uppercase
      float left
      color $main-nav-inactive
      list-style-type none
      line-height 1.8rem

      &.normal
        path
          fill $main-nav-inactive

        &.active, &.active:hover
          color $main-nav-active-font
          background-color $main-nav-active-bg

          path
            fill $main-nav-active-icon

        &:hover
          color $main-nav-hover

          path
            fill $main-nav-hover

        #Fill-6, #Fill-7
          fill $navbar-bg

        &.active
          #Fill-6, #Fill-7
            fill $main-nav-active-bg

      &.cockroach
        padding-top 10px
        height $top-bar-height
        border-bottom 1px solid $navbar-border

      &.active
        background-color $navbar-bg

      a
        width 100%
        height 80px
        padding 20px 0
        display block
        color inherit
        text-decoration none
        &:hover
        &:visited
        &:active
          color @color

        div
          margin auto
          width 100%
          text-align center
          letter-spacing 1px

.page
  ul.nav
    modular-font-size '1'
    color $subnav-text-color
    list-style-type none
    line-height $subnav-height - $subnav-underline-height

    font-family Lato-Bold
    font-size 1.1rem

    li
      display inline-block
      margin-right 3rem

      &.active, &.active:hover
        color $subnav-active-color
        font-weight 600
        border-bottom $subnav-underline-height solid $subnav-active-color

      &:hover
        color $main-nav-hover
      a
        height 100%
        display block
        color inherit
        text-decoration none
        &:hover
        &:visited
        &:active
          color @color

        div
          display inline
